<template>
  <view class="container">
    <view class="container_header">
      <view class="container_header_img">
        <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/51d008497eefd5e7a04e69b18ad3b0d7.png" mode="aspectFill"></image>
      </view>
      <view class="container_header_text">
        <h1>宠物档案建立成功!</h1>
      </view>
    </view>

    <view class="new_pet">
      <button type="success" class="new_pet_button"
        @click="navTo('/subpkg/ldentity/ldentity?id=' + Pet_id)">查看它的宠物身份卡</button>
      <button type="success" class="return_pet_button" @click="returnClick">返回个人中心</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        Pet_id: ''
      };
    },
    onLoad(option) {
      // console.log(option)
      this.Pet_id = option.id
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      returnClick() {
        uni.switchTab({
          url: '/pages/tabbar/me/index'
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    .container_header {
      height: 650rpx;
      // background-color: #07C160;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      .container_header_img {
        width: 239.04rpx;
        height: 262rpx;
        margin-top: 100rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .container_header_text {
        font-size: 48rpx;
        margin-top: 12rpx;
      }
    }

    .new_pet {
      padding: 24rpx;
      width: 750rpx;
      height: 128rpx;
      box-sizing: border-box;
      background-color: #fff;

      .new_pet_button {
        width: 702rpx;
        height: 82rpx;
        background-color: #FDD338;
        // border-radius: 6px;
        color: rgba(61, 61, 61, 1);
        line-height: 82rpx;
        border-radius: 82rpx !important;
        font-size: 16px;
        font-weight: 500;
      }

      .return_pet_button {
        width: 702rpx;
        height: 82rpx;
        background-color: transparent;
        border-radius: 6px;
        color: rgba(61, 61, 61, 1);
        line-height: 82rpx;
        border: 1rpx solid rgba(61, 61, 61, 0.05);
        border-radius: 82rpx;
        margin-top: 30rpx;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
</style>
